<template>
	<div class="carouselCpntainer">
		<el-carousel indicator-position="none" class="carousel" height="100px">
			<el-carousel-item v-for="item in imgUrlList" :key="item.id">
				<!-- <h3>{{ item }}</h3> -->

				<img :src="item.url" class="carouselImg" />
				<!-- <img src="../assets/guangao1.jpg" class="carouselImg" /> -->
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
	export default {
		name: 'SwipeImg',
		data() {
			return {
				imgUrlList: [
					{
						id: 0,
						url: require('../assets/guangao1.jpg'),
					},
					{
						id: 1,
						url: require('../assets/guangao2.jpg'),
					},
					{
						id: 2,
						url: require('../assets/guangao1.jpg'),
					},
					{
						id: 3,
						url: require('../assets/guangao2.jpg'),
					},
				],
			};
		},
		props: {},
		methods: {},
		mounted() {},
	};
</script>

<style scoped>
	.carouselCpntainer {
		/* width: 300px; */
		display: flex;
		justify-content: center;
	}
	.carousel {
		width: 456px;
	}
	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}
	.carouselImg {
		height: 100%;
		width: 456px;
		margin: 0;
	}
</style>
